<template>
    <div class="hc-calendar">
        <el-card class="box-card">
            <div class="schedule-table">
                <div class="schedule-header">
                    <div class="schedule-header-btn"></div>
                    <div class="schedule-header-title" v-html="title"></div>
                    <div class="schedule-header-btn">
                        <el-button-group>
                            <el-button size="mini" @click="goToLastWeek">上一周</el-button>
                            <el-button size="mini" @click="goToThisWeek">本周</el-button>
                            <el-button size="mini" @click="goToNextWeek">下一周</el-button>
                        </el-button-group>
                    </div>
                </div>
                <div class="schedule-body">
                    <div class="weeks-header">
                        <div class="day week">周次 {{getWeekOfYear()}}</div>
                        <div class="day week" v-for="(day,index) in days" :key="day.timestamp">
                            <div>{{ day.zhDate }}</div>
                        </div>
                    </div>
                    <div class="weeks-body" v-for="(preData,index) in listData">
                        <div class="day content" v-html="preData.label"></div>
                        <div class="day content" v-for="(preItem,index) in preData.value"
                             @click="clickWeekCalendar(preItem)" v-html="preItem.content">
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
    import moment from "moment";
    import {clickEvent} from "../../../event/eventClick";

    export default {
        name: "HCCalendarWeek",
        props: {
            listData: {
                type: Array,
                default: []
            },
            formParam: {},
            otherObj: {
                type: [Object, Function],
                default: () =>
                {
                    return {};
                },
            },
            event: {
                type: Object
            },
            title: {
                type: String
            }
        },
        data()
        {
            return {
                days: [],
                currentDate: new Date(),
                columnList: [],
                data: [],
                firstDayOfWeek: null,
            }
        },
        created()
        {
            console.log(this.listData, this.event, this.formParam, this.title, "==============cs");
        },
        methods: {
            // 跳转到上一周
            goToLastWeek()
            {
                this.currentDate.setDate(this.currentDate.getDate() - 7)
                this.generateDays()
            },
            // 跳转到本周
            goToThisWeek()
            {
                this.currentDate = new Date()
                this.generateDays()
            },
            // 跳转到下一周
            goToNextWeek()
            {
                this.currentDate.setDate(this.currentDate.getDate() + 7)
                this.generateDays()
            },
            // 生成日期数组
            generateDays(flag)
            {
                const firstDayOfWeek = new Date(this.currentDate.getTime() - (this.currentDate.getDay() - 1) * 24 * 60 * 60 * 1000);
                this.firstDayOfWeek = firstDayOfWeek;
                console.log(this.firstDayOfWeek);
                this.days = [...Array(7)].map((_, i) =>
                {
                    const date = new Date(firstDayOfWeek);
                    date.setDate(date.getDate() + i);
                    const formattedDate = moment(date).locale('zh-cn').format('ddd MM月DD日');
                    // console.log(date, formattedDate, "日期时间");
                    return {
                        date: date,
                        timestamp: date.getTime(),
                        zhDate: formattedDate,
                    };
                });
                if (!flag)
                {
                    // this.formParam.date = this.firstDayOfWeek;
                    this.formParam.date = moment(this.firstDayOfWeek).format('yyyy-MM-DD HH:mm:ss');
                    // 执行事件回调
                    clickEvent(this.event, this.formParam, this.otherObj);
                }
            },
            // 获取当天时本年的第几周
            getWeekOfYear()
            {
                const today = this.currentDate;
                const year = today.getFullYear();
                const firstDayOfYear = new Date(year, 0, 1); // 本年第一天
                // const firstWeekStartDay = 1; // 定义第一周的开始日期，这里设为星期一
                const daysPassed = (today - firstDayOfYear) / 86400000; // 计算今天是本年的第几天
                const weeksPassed = Math.ceil((daysPassed + firstDayOfYear.getDay() - 1) / 7);
                return weeksPassed;
            },
            // 点击后端传来的数据，触发事件
            clickWeekCalendar(P_Item)
            {
                console.log(P_Item, this.formParam, this.event);
                clickEvent(this.event, P_Item, this.otherObj);
            },
        },
        mounted()
        {
            this.generateDays(true);
        }
    }
</script>

<style lang="scss" scoped>
    .schedule-table {
        width: 100%;
        height: 100%;
    }

    .schedule-header {
        padding: 12px 20px;
        display: flex;
        flex-direction: row;
        align-items: center; /* 垂直居中 */
        .schedule-header-title {
            flex: 1; /* 占据剩余空间 */
            text-align: center; /* 文字居中 */
            font-size: 21px;
        }

        .schedule-header-btn {
            flex-shrink: 0; /* 不缩小 */
            width: 20%;
            text-align-last: right;
        }
    }

    .schedule-body {
        .weeks-header {
            display: flex;
            border-top: 1px solid #e9e9e9;
            border-left: 1px solid #e9e9e9;

            .week {
                background-color: #f5f5f5;
                color: #999;
                height: 40px;
                line-height: 40px;
                margin: 0;
                text-align: center;
                font-weight: 700;
            }
        }

        .weeks-body {
            display: flex;
            border-left: 1px solid #e9e9e9;

            .content {
                height: 40px;
            }
        }

        .day {
            width: 12.5%;
            border-right: 1px solid #e9e9e9;
            border-bottom: 1px solid #e9e9e9;
        }
    }

</style>